<template>
    <div class="common-search-box">
        <div class="floor-search">
            <input
                ref="myRoomRef"
                v-model="searchValue"
                type="text"
                :placeholder="placeholder"
                class="floor-search-input"
                @keyup.enter="handleSearch" />
            <!-- <img
                v-if="searchValue"
                class="floor-cancel"
                @click="handleClear"
                src="@/assets/images/cancel.png" /> -->
            <img
                class="floor-img"
                @click="handleSearch"
                src="@/assets/images/search.png" />
        </div>
    </div>
</template>
<script setup>
const props = defineProps({
    placeholder: {
        type: String,
        default: '请输入'
    },
    modelValue: String,
})
const emits = defineEmits(['triggerSearch', 'update:modelValue'])
const myRoomRef = ref(null)
const searchValue = computed({
    get() {
        return props.modelValue
    },
    set(val) {
        emits('update:modelValue', val)
    }
});
const handleSearch = () => {
    emits('triggerSearch')
}


const handleFocus = () => myRoomRef.value && myRoomRef.value.focus();

const handleClear = () => {
    searchValue.value = '';
    emits('triggerSearch')
}
</script>
<style lang="scss" scoped>
.common-search-box {
    position: relative;
    padding-top: 4px;
    margin-left: 10px;

    .floor-search {
        position: relative;
        width: 440px;
        height: 32px;
        border-radius: 16px;
        box-shadow: inset 0px 0px 12px 0px #e28aee;
        line-height: 32px;
        opacity: 1;
        transition: all .2s;

        &.empty {
            opacity: .7;
        }

        .floor-search-input {
            display: inline-block;
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            border-radius: inherit;
            padding-left: inherit;
            line-height: inherit;
            background-color: #000;
            border: none;
            padding: 2px 38px 2px 14px;
            box-sizing: border-box;
            color: rgba(255,255,255,0.5);
            font-size: 14px;
            &::placeholder {
                color: rgba($color: #fff, $alpha: .5);
            }

            &:focus {
                outline: none;
            }
        }

        .floor-cancel,
        .floor-img {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translate(0, -50%) scale(1);

            width: 14px;
            height: 14px;
        }

        .floor-cancel {
            cursor: pointer;

            &:active {
                transition: all 0.1s ease;
                transform: translate(0, -50%) scale(1.05);
            }
        }
    }
}
</style>
